<template>
  <!-- 头部 -->
  <div id="top">
    <!-- 时间选择 -->
    <div class="selectTime">
      <!-- 时间选择器 -->
      <n-date-picker v-model:value="range" type="daterange" clearable />
      <!-- <pre>{{ JSON.stringify(range) }}</pre> -->
    </div>
    <!-- 关键字搜索 -->
    <div class="search">
      <!-- 搜索框 -->
      <n-space vertical>
        <n-input placeholder="搜索">
          <template #prefix>
            <n-icon>
              <flash-icon />
            </n-icon>
          </template>
        </n-input>
      </n-space>
    </div>
  </div>
  <!-- 中间 -->
  <div class="content">
    <!-- 前台反馈信息数据表格 -->
    <n-data-table ref="table" :columns="columns" :data="data" :pagination="pagination"  />
  </div>
</template>

<script>
import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Feedback',
  data () {
    return {
      data,
      columns,
      pagination: {
        page: 2,
        pageSize: 7,
        showSizePicker: true,
        pageSizes: [3, 5, 7],
        onChange: (page) => {
          this.pagination.page = page
        },
        onPageSizeChange: (pageSize) => {
          this.pagination.pageSize = pageSize
          this.pagination.page = 1
        }
      },
      range: [1183135260000, Date.now()]
    }
  },
  components: {
    FlashIcon
  }
})
const columns = [
  {
    title: '昵称',
    key: 'name'
  },
  {
    title: '等级',
    key: 'grade'
  },
  {
    title: '反馈内容',
    key: 'reason'
  },
  {
    title: '反馈时间',
    key: 'time'
  }
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
  key: index,
  name: `用户 ${index}`,
  grade: 32,
  reason: `London, Park Lane no. ${index}`,
  time: '2021.09.02'
}))
</script>

<style scoped>
  /* 头部 */
  #top{
    height: 50px;
    width:1280px;
    margin: 10px 9px;
    /*background-color:lightgray;*/
    overflow: hidden;
  }
  /* 时间选择和搜索关键字 */
  #top .selectTime,.search{
    float: left;
  }
  #top .selectTime .n-date-picker{
    width:400px;
    line-height: 50px;
    /*margin-left: 10px ;*/
  }
  #top .search .n-space .n-input{
    width: 150px;
    height: 33px;
    margin: 9px 0 0 15px;
  }
  /* 中间表格 */
  .content{
    width:1280px;
    margin: 0 9px;
    /*background-color:lightgray;*/
  }
  .content .n-data-table{
    height: 400px;
  }
</style>
